<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/editor.css" rel="stylesheet" type="text/css">
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='language/"+sLangDir+"/table_editCell.js'></scr"+"ipt>");

</script>
<script language="JavaScript" src="color_picker.js"></script>
<script>writeTitle()</script>
<script language="JavaScript" src="table.js"></script>
<script>

var dialogArgument=['parent', 'parent'];

document.onclick=hideAll;
function hideAll()
  {
  oColor1.hide();
  }

function modalDialogShow(url,width,height)
    {
    parent.modalDialogShow(parent.oUtil.obj.scriptPath+url,width,height,window);
    }

function tabClick(n)
  {
  switch(n)
    {
    case 1:
      tab1.style.border="#e5e5e5 1px solid";
      tab1.style.borderBottom="none";
      tab1.style.background="#ffffff";
      tab1.style.cursor="";

      tab2.style.border="#e5e5e5 1px solid";
      tab2.style.borderLeft="none";
      tab2.style.background="#e5e5e5";
      tab2.style.cursor="pointer";

      tab3.style.border="#e5e5e5 1px solid";
      tab3.style.borderLeft="none";
      tab3.style.background="#e5e5e5";
      tab3.style.cursor="pointer";


      divAutoFit.style.display="block"
      divProperties.style.display="none"
      divStyle.style.display="none"

      break;
    case 2:
      tab1.style.border="#e5e5e5 1px solid";
      tab1.style.borderRight="none";
      tab1.style.background="#e5e5e5";
      tab1.style.cursor="pointer";

      tab2.style.border="#e5e5e5 1px solid";
      tab2.style.borderBottom="none";
      tab2.style.background="#ffffff";
      tab2.style.cursor="";

      tab3.style.border="#e5e5e5 1px solid";
      tab3.style.borderLeft="none";
      tab3.style.background="#e5e5e5";
      tab3.style.cursor="pointer";

      divAutoFit.style.display="none"
      divProperties.style.display="block"
      divStyle.style.display="none"

      break;
    case 3:
      tab1.style.border="#e5e5e5 1px solid";
      tab1.style.borderRight="none";
      tab1.style.background="#e5e5e5";
      tab1.style.cursor="pointer";

      tab2.style.border="#e5e5e5 1px solid";
      tab2.style.borderRight="none";
      tab2.style.background="#e5e5e5";
      tab2.style.cursor="pointer";

      tab3.style.border="#e5e5e5 1px solid";
      tab3.style.borderBottom="none";
      tab3.style.background="#ffffff";
      tab3.style.cursor="";

      divAutoFit.style.display="none"
      divProperties.style.display="none"
      divStyle.style.display="block"

      break;
    }
  }

/************************
  COMMON
************************/
function GetElement(oElement,sMatchTag)
  {
  while (oElement!=null&&oElement.tagName!=sMatchTag)
    {
    if(oElement.tagName=="BODY")return null;
    oElement=oElement.parentElement;
    }
  return oElement;
  }

function doWindowFocus()
  {
  parent.oUtil.onSelectionChanged=new Function("realTime()");
  }
function bodyOnLoad()
  {
  loadTxt();

  tabClick(1);
  window.onfocus=doWindowFocus;
  parent.oUtil.onSelectionChanged=new Function("realTime()");

  realTime()
  }

function bodyOnUnload()
  {
  parent.oUtil.onSelectionChanged=null;
  }

function realTime()
  {
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  var oTable = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"));
  var oTD = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TD") : GetElement(oSel.item(0),"TD"))
  if (oTD == null) return;

  divPreview.style.cssText=oTD.style.cssText; //PREVIEW

  //AUTOFIT
  inpWidth.value=="";//reset
  if(oTD.style.width == "")inpAutoFit1[0].checked=true;
  else
    {
    if(oTD.style.width.substr(oTD.style.width.length-2,2)=="px")
      {
      inpAutoFit1[1].checked=true;
      inpAutoFitMeasure1.value = "px";
      inpWidth.value = oTD.style.width.substr(0,oTD.style.width.length-2);
      }
    if(oTD.style.width.substr(oTD.style.width.length-1,1)=="%")
      {
      inpAutoFit1[1].checked=true;
      inpAutoFitMeasure1.value = "%";
      inpWidth.value = oTD.style.width.substr(0,oTD.style.width.length-1)
      }
    }

  inpHeight.value=="";//reset
  if(oTD.style.height == "")inpAutoFit2[0].checked=true;
  else
    {
    if(oTD.style.height.substr(oTD.style.height.length-2,2)=="px")
      {
      inpAutoFit2[1].checked=true;
      inpAutoFitMeasure2.value = "px";
      inpHeight.value = oTD.style.height.substr(0,oTD.style.height.length-2);
      }
    if(oTD.style.height.substr(oTD.style.height.length-1,1)=="%")
      {
      inpAutoFit2[1].checked=true;
      inpAutoFitMeasure2.value = "%";
      inpHeight.value = oTD.style.height.substr(0,oTD.style.height.length-1)
      }
    }

  //STYLE
  inpCSSText.value = oTD.style.cssText

  //PROPERTIES
  /**** Align ****/   //=>OK
  if(oTD.style.textAlign=="")
    {
    if(oTD.align!="")
      {
      inpAlign.value=oTD.align;
      divPreview.style.textAlign=oTD.align; //PREVIEW (not standard)
      }
    else
      {//Not Set
      inpAlign.value="";
      }
    }
  else
    {
    inpAlign.value=oTD.style.textAlign;
    }

  /**** Vertical Align ****/   //=>OK
  if(oTD.style.verticalAlign=="")
    {
    if(oTD.vAlign!="")
      {
      inpVAlign.value=oTD.vAlign;
      divPreview.style.verticalAlign=oTD.vAlign; //PREVIEW (not standard)
      }
    else
      {//Not Set
      inpVAlign.value = "";
      }
    }
  else
    {
    inpVAlign.value=oTD.style.verticalAlign;
    }

  /**** No Wrap (White Space) ****/   //=>OK
  if(oTD.style.whiteSpace=="")
    {
    if(oTD.noWrap)
      {
      inpWhtSpace.value="nowrap";
      divPreview.style.whiteSpace="nowrap"; //PREVIEW (not standard)
      }
    else
      {
      inpWhtSpace.value="";
      }
    }
  else
    {
    inpWhtSpace.value=oTD.style.whiteSpace;
    }

  /**** background ****/   //=>OK (harus lebih dulu dari background color)
  if(oTD.style.backgroundImage=="")
    {
    if(oTD.background)
      {
      divPreview.style.background="url('"+oTD.background+"')"; //PREVIEW (not standard)
      }
    else
      {
      divPreview.style.background=""
      }
    }
  else
    {
    divPreview.style.backgroundImage=oTD.style.backgroundImage;
    divPreview.style.backgroundRepeat=oTD.style.backgroundRepeat;
    divPreview.style.backgroundPosition=oTD.style.backgroundPosition;
    }

  /**** backgroundColor ****/   //=>OK
  if(oTD.style.backgroundColor=="")
    {
    if(oTD.bgColor)
      {
      inpBackgroundColor.style.backgroundColor=oTD.bgColor;
      divPreview.style.backgroundColor=oTD.bgColor; //PREVIEW (not standard)
      oColor1.color=oTD.bgColor;
      }
    else
      {
      inpBackgroundColor.style.backgroundColor="";
      oColor1.color="";
      }
    }
  else
    {
    inpBackgroundColor.style.backgroundColor=oTD.style.backgroundColor;
    oColor1.color=oTD.style.backgroundColor;
    }

  /**** Padding (default: selalu ketambahan px kalo satuan gak diset) ****/   //=>OK
  //Berkaitan dgn "Not Available"
  if(oTD.style.paddingLeft!="")
    {
    if(oTD.style.paddingLeft.substr(oTD.style.paddingLeft.length-2,2)!="px") inpPaddingLeft.value="na";
    else inpPaddingLeft.value = oTD.style.paddingLeft.substring(0,oTD.style.paddingLeft.length-2);
    }
  else inpPaddingLeft.value="";

  if(oTD.style.paddingRight!="")
    {
    if(oTD.style.paddingRight.substr(oTD.style.paddingRight.length-2,2)!="px") inpPaddingRight.value="na";
    else inpPaddingRight.value = oTD.style.paddingRight.substring(0,oTD.style.paddingRight.length-2);
    }
  else inpPaddingRight.value="";

  if(oTD.style.paddingTop!="")
    {
    if(oTD.style.paddingTop.substr(oTD.style.paddingTop.length-2,2)!="px") inpPaddingTop.value="na";
    else inpPaddingTop.value = oTD.style.paddingTop.substring(0,oTD.style.paddingTop.length-2);
    }
  else inpPaddingTop.value="";

  if(oTD.style.paddingBottom!="")
    {
    if(oTD.style.paddingBottom.substr(oTD.style.paddingBottom.length-2,2)!="px") inpPaddingBottom.value="na";
    else inpPaddingBottom.value = oTD.style.paddingBottom.substring(0,oTD.style.paddingBottom.length-2);
    }
  else inpPaddingBottom.value="";
  }

function refresh()
  {
  divPreview.style.textAlign=inpAlign.value;
  divPreview.style.verticalAlign=inpVAlign.value;
  divPreview.style.whiteSpace=inpWhtSpace.value;

  //Berkaitan dgn "Not Available"
  if(inpPaddingLeft.value!="na") divPreview.style.paddingLeft = inpPaddingLeft.value; //by default satuanya pixel
  if(inpPaddingRight.value!="na") divPreview.style.paddingRight = inpPaddingRight.value;
  if(inpPaddingTop.value!="na") divPreview.style.paddingTop = inpPaddingTop.value;
  if(inpPaddingBottom.value!="na") divPreview.style.paddingBottom = inpPaddingBottom.value;

  //Tdk bisa seperti ini: (akan menghapus backgroundImage)
  //divPreview.style.backgroundColor=inpBackgroundColor.style.backgroundColor;

  //Harus spt ini:
  if(divPreview.style.backgroundImage!=""&&
    inpBackgroundColor.style.backgroundColor=="")
    divPreview.style.background = divPreview.style.backgroundImage+" "+ divPreview.style.backgroundRepeat + " "+divPreview.style.backgroundPosition;
  else if(divPreview.style.backgroundImage==""&&
    inpBackgroundColor.style.backgroundColor!="")
    divPreview.style.backgroundColor=inpBackgroundColor.style.backgroundColor;
  else if(divPreview.style.backgroundImage==""&&
    inpBackgroundColor.style.backgroundColor=="")
    divPreview.style.background="";
  else
    divPreview.style.background = divPreview.style.backgroundImage+" " + inpBackgroundColor.style.backgroundColor + " " + divPreview.style.backgroundRepeat + " "+divPreview.style.backgroundPosition;
  }

function doApply()
  {
  parent.oUtil.obj.setFocus();
  if(!parent.oUtil.obj.checkFocus()){return;}//Focus stuff
  var oEditor=parent.oUtil.oEditor;
  var oSel=oEditor.document.selection.createRange();

  parent.oUtil.obj.saveForUndo();

  var oTable = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"));
  var oTD = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TD") : GetElement(oSel.item(0),"TD"))
  if (oTD == null) return;

  if(inpApplyTo.value=="Current Cell")
    {
    format(oTD)
    }
  if(inpApplyTo.value=="Current Row")
    {
    var arrCells=rowOperation(true,false,false,false);
    for (var i=0;i<arrCells.length;i++)
      {
      format(oTable.rows[arrCells[i][0]].cells[arrCells[i][1]])
      }
    }
  if(inpApplyTo.value=="Current Column")
    {
    var arrCells=colOperation(true,false,false,false);
    for (var i=0;i<arrCells.length;i++)
      {
      format(oTable.rows[arrCells[i][0]].cells[arrCells[i][1]])
      }
    }
  if(inpApplyTo.value=="Whole Table")
    {
    for (var i=0;i<oTable.rows.length;i++)
      {
      var oRow = oTable.rows[i];
      for(var j=0;j<oRow.cells.length;j++)
        {
        var oCell=oRow.cells[j];
        format(oCell);
        }
      }
    }

  realTime()

  //*** RUNTIME BORDERS ***
  parent.oUtil.obj.runtimeBorder(false);
  //***********************
  }

function format(oTD)
  {
  //STYLE
   oTD.style.cssText = inpCSSText.value;

   if(divStyle.style.display=="block")return;

  //AUTOFIT
  if(inpAutoFit1[0].checked==true) oTD.style.width="";
  else
    {
    if(inpWidth.value!="") oTD.style.width=inpWidth.value+inpAutoFitMeasure1.value;
    else oTD.style.width="";
    }
  if(inpAutoFit2[0].checked==true) oTD.style.height="";
  else
    {
    trigger1.innerHTML="";
    if(inpHeight.value!="") oTD.style.height=inpHeight.value+inpAutoFitMeasure2.value;
    else oTD.style.height="";
    }

  //PROPERTIES
  oTD.style.textAlign=inpAlign.value;
  oTD.style.verticalAlign=inpVAlign.value;
  oTD.style.whiteSpace=inpWhtSpace.value;

  //Berkaitan dgn "Not Available"
  if(inpPaddingLeft.value!="na") oTD.style.paddingLeft = inpPaddingLeft.value; //by default satuanya pixel
  if(inpPaddingRight.value!="na") oTD.style.paddingRight = inpPaddingRight.value;
  if(inpPaddingTop.value!="na") oTD.style.paddingTop = inpPaddingTop.value;
  if(inpPaddingBottom.value!="na") oTD.style.paddingBottom = inpPaddingBottom.value;

  oTD.style.backgroundImage=divPreview.style.backgroundImage;
  oTD.style.backgroundRepeat=divPreview.style.backgroundRepeat;
  oTD.style.backgroundPosition=divPreview.style.backgroundPosition;
  oTD.style.backgroundColor=inpBackgroundColor.style.backgroundColor;

  //Border & Shading
  if(divPreview.style.borderLeftWidth=="" || divPreview.style.borderLeftWidth==0) oTD.style.borderLeft="";
  else oTD.style.borderLeft=divPreview.style.borderLeft;

  if(divPreview.style.borderRightWidth=="" || divPreview.style.borderRightWidth==0) oTD.style.borderRight="";
  else oTD.style.borderRight=divPreview.style.borderRight;

  if(divPreview.style.borderTopWidth=="" || divPreview.style.borderTopWidth==0) oTD.style.borderTop="";
  else oTD.style.borderTop=divPreview.style.borderTop;

  if(divPreview.style.borderBottomWidth=="" || divPreview.style.borderBottomWidth==0) oTD.style.borderBottom="";
  else oTD.style.borderBottom=divPreview.style.borderBottom;

  //Clean
  sTmpStyle=oTD.style.cssText
  sTmpStyle=sTmpStyle.replace(/BORDER-RIGHT: medium none;/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-RIGHT: medium none/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-TOP: medium none;/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-TOP: medium none/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-LEFT: medium none;/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-LEFT: medium none/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-BOTTOM: medium none;/,"")
  sTmpStyle=sTmpStyle.replace(/BORDER-BOTTOM: medium none/,"")
  oTD.style.cssText=sTmpStyle

  //Text Formatting
  if(divPreview.style.fontFamily!="") oTD.style.fontFamily=divPreview.style.fontFamily;
  else
    {
    oTD.style.cssText = oTD.style.cssText.replace("FONT-FAMILY: ; ","");
    oTD.style.cssText = oTD.style.cssText.replace("FONT-FAMILY: ","");
    }

  if(divPreview.style.fontSize!="") oTD.style.fontSize=divPreview.style.fontSize;
  else
    {
    oTD.style.cssText = oTD.style.cssText.replace("FONT-SIZE: ; ","");
    oTD.style.cssText = oTD.style.cssText.replace("FONT-SIZE: ","");
    }

  oTD.style.fontStyle=divPreview.style.fontStyle;//
  oTD.style.fontWeight=divPreview.style.fontWeight;//
  oTD.style.fontVariant=divPreview.style.fontVariant;//
  oTD.style.textDecoration=divPreview.style.textDecoration;//
  oTD.style.verticalAlign=divPreview.style.verticalAlign;//
  oTD.style.textTransform=divPreview.style.textTransform;//
  oTD.style.color=divPreview.style.color;

  oTD.style.letterSpacing=divPreview.style.letterSpacing;
  oTD.style.wordSpacing=divPreview.style.wordSpacing;
  if(oTD.style.letterSpacing=="")
    {
    oTD.style.letterSpacing=0
    oTD.style.cssText = oTD.style.cssText.replace("LETTER-SPACING: 0px; ","");
    oTD.style.cssText = oTD.style.cssText.replace("LETTER-SPACING: 0px","");
    }
  if(oTD.style.wordSpacing=="")
    {
    oTD.style.wordSpacing=0
    oTD.style.cssText = oTD.style.cssText.replace("WORD-SPACING: 0px; ","");
    oTD.style.cssText = oTD.style.cssText.replace("WORD-SPACING: 0px","");
    }
  }

</script>
</head>
<body style="overflow:hidden;">

<table width=100% align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding-top:15;padding-left:13px;padding-right:13px;padding-bottom:0px;">

    <table cellpadding=0 cellspacing=0 style="border-collapse:collapse;width:100%;" ID="Table2">
        <tr>
            <td id=tab1 style="cursor:default;padding:8px;" onclick="tabClick(1)" nowrap><b><span id=txtLang
                                                                                                  name=txtLang>AutoFit</span></b>
            </td>
            <td id=tab2 style="cursor:default;padding:8px;" onclick="tabClick(2)" nowrap><b><span id=txtLang
                                                                                                  name=txtLang>Properties</span></b>
            </td>
            <td id=tab3 style="cursor:default;padding:8px;" onclick="tabClick(3)" nowrap><b><span id=txtLang
                                                                                                  name=txtLang>Style</span></b>
            </td>
            <td style="border-bottom:#e5e5e5 1px solid;" width=100%></td>
        </tr>
    </table>


    <table cellpadding=0 cellspacing=0
           style="border:#e5e5e5 1px solid;border-top:none;border-collapse:collapse;width:100%;height:340px;background:#ffffff;">
        <tr>
            <td style="padding:7px;" valign='top'>

                <!-- AUTOFIT -->
                <div id=divAutoFit style="display:block;">
                    <div style="margin-bottom:7px;margin-top:3px;"><span id=txtLang name=txtLang>Width</span>:</div>
                    <input type="radio" class=inpRdo name="inpAutoFit1"><span id=txtLang name=txtLang>AutoFit to contents</span><br>
                    <input type="radio" class=inpRdo name="inpAutoFit1"><span id=txtLang
                                                                              name=txtLang>Fixed cell width</span>:
                    <input type="text" name="inpWidth" size=3 onblur="inpAutoFit1[1].checked=true" class="inpTxt">
                    <select ID="inpAutoFitMeasure1" name="inpAutoFitMeasure1" class="inpSel">
                        <option value="px" id="optLang" name="optLang">pixels</option>
                        <option value="%" id="optLang" name="optLang">percent</option>
                    </select>

                    <br><br>

                    <div style="margin-bottom:7px;margin-top:3px;"><span id=txtLang name=txtLang>Height</span>:</div>
                    <input type="radio" class=inpRdo name="inpAutoFit2"><span id=txtLang name=txtLang>AutoFit to contents</span><br>
                    <input type="radio" class=inpRdo name="inpAutoFit2"><span id=txtLang
                                                                              name=txtLang>Fixed cell height</span>:
                    <input type="text" name="inpHeight" size=3 onblur="inpAutoFit2[1].checked=true" class="inpTxt">
                    <select ID="inpAutoFitMeasure2" name="inpAutoFitMeasure2" class="inpSel">
                        <option value="px" id="optLang" name="optLang">pixels</option>
                        <option value="%" id="optLang" name="optLang">percent</option>
                    </select>
                    <br>
                    <span id=trigger1></span>
                </div>


                <!-- PROPERTIES -->
                <div id="divProperties" style="display:none;">

                    <table style="border-collapse:separate">
                        <tr>
                            <td nowrap>
                                <span id=txtLang name=txtLang>Text Alignment</span>:&nbsp;
                            </td>
                            <td>
                                <select name="inpVAlign" onchange="refresh()" style="width:100%" class="inpSel">
                                    <option value="" id="optLang" name="optLang">not set</option>
                                    <option value="top" id="optLang" name="optLang" selected>top</option>
                                    <option value="middle" id="optLang" name="optLang">middle</option>
                                    <option value="bottom" id="optLang" name="optLang">bottom</option>
                                    <option value="baseline" id="optLang" name="optLang">baseline</option>
                                    <option value="sub" id="optLang" name="optLang">sub</option>
                                    <option value="super" id="optLang" name="optLang">super</option>
                                    <option value="text-top" id="optLang" name="optLang">text-top</option>
                                    <option value="text-bottom" id="optLang" name="optLang">text-bottom</option>
                                </select>
                            </td>
                            <td>
                                <select name="inpAlign" onchange="refresh()" class="inpSel">
                                    <option value="" id="optLang" name="optLang">not set</option>
                                    <option value="left" id="optLang" name="optLang" selected>left</option>
                                    <option value="center" id="optLang" name="optLang">center</option>
                                    <option value="right" id="optLang" name="optLang">right</option>
                                    <option value="justify" id="optLang" name="optLang">justify</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-top:3px">
                                <span id=txtLang name=txtLang>Padding</span>
                            </td>
                            <td nowrap>
                                <table cellpadding=2 cellspacing=0>
                                    <tr>
                                        <td nowrap><span id=txtLang name=txtLang>Left</span>:</td>
                                        <td><input type="text" name="inpPaddingLeft" size=1 onblur="refresh()"
                                                   class="inpTxt"></td>
                                        <td> px</td>
                                        <td>&nbsp;&nbsp;</td>
                                        <td nowrap align=right><span id=txtLang name=txtLang>Right</span>:</td>
                                        <td><input type="text" name="inpPaddingRight" size=1 onblur="refresh()"
                                                   class="inpTxt"></td>
                                        <td> px</td>
                                    </tr>
                                    <tr>
                                        <td nowrap><span id=txtLang name=txtLang>Top</span>:</td>
                                        <td><input type="text" name="inpPaddingTop" size=1 onblur="refresh()"
                                                   class="inpTxt"></td>
                                        <td> px</td>
                                        <td>&nbsp;&nbsp;</td>
                                        <td nowrap align=right><span id=txtLang name=txtLang>Bottom</span>:</td>
                                        <td><input type="text" name="inpPaddingBottom" size=1 onblur="refresh()"
                                                   class="inpTxt"></td>
                                        <td> px</td>
                                    </tr>
                                </table>
                            </td>
                            <td>&nbsp;</td>
                        </tr>

                        <tr>
                            <td>
                                <span id=txtLang name=txtLang>White Space</span>:&nbsp;
                            </td>
                            <td>
                                <select name="inpWhtSpace" onchange="refresh()" style="width:100%" class="inpSel">
                                    <option value="" id="optLang" name="optLang" selected>Not Set</option>
                                    <option value="nowrap" id="optLang" name="optLang">No Wrap</option>
                                    <option value="pre" id="optLang" name="optLang">pre</option>
                                    <option value="normal" id="optLang" name="optLang">Normal</option>
                                </select>
                            </td>
                            <td></td>
                        </tr>

                        <tr>
                            <td>
                                <span id=txtLang name=txtLang>Background</span>:&nbsp;
                            </td>
                            <td>
                                <span style="background:#ffffff;"><span id="inpBackgroundColor"
                                                                        style="border:gray 1px solid;width:16px;height:16px;margin-right:3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                <input type=button id="btnPick" name="btnPick" value=Pick
                                       onclick="oColor1.show(this);event.cancelBubble=true;"/>

                                <script>
        var oColor1 = new ColorPicker("oColor1");
        oColor1.onPickColor = new Function("inpBackgroundColor.style.backgroundColor=oColor1.color;refresh()");
        oColor1.onRemoveColor = new Function("inpBackgroundColor.style.backgroundColor='';refresh()");
        oColor1.align="left";
        oColor1.txtCustomColors=getTxt("Custom Colors");
        oColor1.txtMoreColors=getTxt("More Colors...");
        oColor1.url = parent.oUtil.obj.scriptPath + "color_picker.htm";
        oColor1.RENDER();

                                </script>
                                <input type="button" name="btnImage" id="btnImage" value="Image"
                                       onclick="modalDialogShow('image_background.htm?divPreview', 380, 196);;refresh()"/>
                            </td>
                            <td>&nbsp;</td>
                        </tr>

                        <tr>
                            <td colspan=3>
                                <div style="margin-bottom:5px;margin-top:5px;">
                                    <span id=txtLang name=txtLang>Preview</span>:
                                </div>
                                <table cellpadding=0 cellspacing=0>
                                    <tr>
                                        <td valign="middle" align="center">
                                            <div style="overflow:auto;border:#999999 1px solid;width:360px;height:70px;background:#ffffff;padding:3px">
                                                <table style="border-collapse: collapse;" cellSpacing=0 cellPadding=0>
                                                    <tr>
                                                        <td id=divPreview
                                                            style="border:#000000 1px solid;width:50px;height:50px;">
                                                            Text 123
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <input type="button" name=btnText id=btnText value=" Text Formatting "
                           style="width:140px;margin-top:5px;margin-bottom:5px;"
                           onclick="dialogArgument=['parent', 'openerWin.document.getElementById(\'divPreview\')'];modalDialogShow('text2.htm', 511, 468)"/>
                    <input type="button" name=btnBorder id=btnBorder value=" Border Style "
                           style="width:140px;margin-top:5px;margin-bottom:5px;"
                           onclick="dialogArgument=['parent', 'openerWin.document.getElementById(\'divPreview\')'];modalDialogShow('border.htm', 460, 250)"/>

                </div>


                <!-- CSS -->
                <div id="divStyle" style="display:none;">
                    <div style="margin:3px;margin-bottom:9px;">
                        <span id=txtLang name=txtLang>CSS Text</span>: <br>
                        <textarea name="inpCSSText" style="width:100%;height:200px;font-family:verdana;font-size:10px"
                                  class="inpTxt"></textarea>
                    </div>
                </div>

            </td>
        </tr>
        <tr>
            <td style="padding-right:8px;padding-bottom:8px">

                <table align=right cellpadding=0 cellspacing=0>
                    <tr>
                        <td><span id=txtLang name=txtLang>Apply to</span>:&nbsp;</td>
                        <td>
                            <select name=inpApplyTo class="inpSel">
                                <option value="Current Cell" id="optLang" name="optLang" selected>Current Cell</option>
                                <option value="Current Row" id="optLang" name="optLang">Current Row</option>
                                <option value="Current Column" id="optLang" name="optLang">Current Column</option>
                                <!--<option value="Odd Row">Odd Row</option>
                                <option value="Even Row">Even Row</option>
                                <option value="Odd Column">Odd Column</option>
                                <option value="Even Column">Even Column</option>-->
                                <option value="Whole Table" id="optLang" name="optLang">Whole Table</option>
                            </select>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

</td>
</tr>
<tr>
    <td class="dialogFooter" style="padding-top:10px;" align="right">
        <table cellpadding=0 cellspacing=0>
            <tr>
                <td>
                    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.closeWin()"
                           class="inpBtn" onmouseover="this.className='inpBtnOver';"
                           onmouseout="this.className='inpBtnOut'">
                </td>
                <td>
                    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply()" class="inpBtn"
                           onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
                </td>
                <td>
                    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.closeWin()"
                           class="inpBtn" onmouseover="this.className='inpBtnOver';"
                           onmouseout="this.className='inpBtnOut'">
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

</body>
</html>